<template>
    <div class="tagbar-container">
        <el-tag class="tagbar-item" :closable="item.path != '/home'" @close="handleClose(item)" @click="toPage(item.path)" v-for="item in tags" :key="item.path" :effect="$route.path==item.path?'dark':'plain'">{{item.title}}</el-tag>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    computed: {
        ...mapState(["tags"]),
    },
    watch: {
        $route() {
            let r = this.$route;
            this.addTag({
                name: r.name,
                path: r.path,
                title: r.meta.title,
            });
        },
        // tags: {
        //     handler(val, oldVal) {
        //         let length = val.length;
        //         let path = val[length - 1].path;
        //         if (this.$route.path != path) {
        //             this.$router.push({ path });
        //         }
        //     },
        //     deep: true,
        // },
    },
    methods: {
        ...mapMutations(["addTag", "delTag"]),
        toPage(path) {
            if (this.$route.path != path) {
                this.$router.push({ path });
            }
        },
        handleClose(item) {
            this.delTag(item);
        },
    },
    mounted() {
        let r = this.$route;
        this.addTag({
            name: r.name,
            path: r.path,
            title: r.meta.title,
        });
    },
};
</script>

<style scoped>
.tagbar-container {
    width: 100%;
    height: 34px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}
.tagbar-item {
    margin: 0 5px;
    cursor: pointer;
}
</style>